<template>
	<view>
		<view class="search">
			<u-search placeholder="请输入关键词" :showAction="false"  ></u-search>
		</view>
		
		<u-notice-bar :text="text1" mode="closable" style="margin: 20rpx 0;"></u-notice-bar>
		
		<view class="box">
			<view class="left">
				<view class="city">
					广州
				</view>
			</view>
			
			<view class="right">
				<view class="qu">
					<u-cell-group>
						<u-cell title="天河区" :isLink="true" arrow-direction="down" @click="show6 = !show6"></u-cell>
					</u-cell-group>
					<view class="List" v-for="t in tianhe" v-show="show6===true" @click="onDetail(t.id)">
						<img :src="t.img" style="height: 150rpx; width: 150rpx; margin-bottom: 10rpx;">
						<view class="Text">
							<view class="" style="font-size: 40rpx;">
								{{t.name}}
							</view>
							<view class="" style="font-size: 25rpx;">
								原产地：广东省广州市{{t.text}}
							</view>
						</view>
						<br>
					</view>
				</view>
				<view class="qu">
					<u-cell-group>
						<u-cell title="番禺区" :isLink="true" arrow-direction="down" @click="show1 = !show1"></u-cell>
					</u-cell-group>
					<view class="List" v-for="p in panyu" v-show="show1===true" @click="onDetail(p.id)">
						<img :src="p.img" style="height: 150rpx; width: 150rpx; margin-bottom: 10rpx;">
						<view class="Text">
							<view class="" style="font-size: 40rpx;">
								{{p.name}}
							</view>
							<view class="" style="font-size: 25rpx;">
								原产地：广东省广州市{{p.text}}
							</view>
						</view>
						<br>
					</view>
				</view>
				<view class="qu">
					<u-cell-group>
						<u-cell title="增城区" :isLink="true" arrow-direction="down" @click="show2 = !show2"></u-cell>
					</u-cell-group>
					<view class="List" v-for="z in zengcheng" v-show="show2===true" @click="onDetail(z.id)">
						<img :src="z.img" style="height: 150rpx; width: 150rpx; margin-bottom: 10rpx;">
						<view class="Text">
							<view class="" style="font-size: 40rpx;">
								{{z.name}}
							</view>
							<view class="" style="font-size: 25rpx;">
								原产地：广东省广州市{{z.text}}
							</view>
						</view>
						<br>
					</view>
				</view>
				<view class="qu">
					<u-cell-group>
						<u-cell title="黄埔区" :isLink="true" arrow-direction="down" @click="show3 = !show3"></u-cell>
					</u-cell-group>
					<view class="List" v-for="h in huangpu" v-show="show3===true" @click="onDetail(h.id)">
						<img :src="h.img" style="height: 150rpx; width: 150rpx; margin-bottom: 10rpx;">
						<view class="Text">
							<view class="" style="font-size: 40rpx;">
								{{h.name}}
							</view>
							<view class="" style="font-size: 25rpx;">
								原产地：广东省广州市{{h.text}}
							</view>
						</view>
						<br>
					</view>
				</view>
				<view class="qu">
					<u-cell-group>
						<u-cell title="从化区" :isLink="true" arrow-direction="down" @click="show4 = !show4"></u-cell>
					</u-cell-group>
					<view class="List" v-for="c in conghua" v-show="show4===true" @click="onDetail(c.id)">
						<img :src="c.img" style="height: 150rpx; width: 150rpx; margin-bottom: 10rpx;">
						<view class="Text">
							<view class="" style="font-size: 40rpx;">
								{{c.name}}
							</view>
							<view class="" style="font-size: 25rpx;">
								原产地：广东省广州市{{c.text}}
							</view>
						</view>
						<br>
					</view>
				</view>
				<view class="qu">
					<u-cell-group>
						<u-cell title="南沙区" :isLink="true" arrow-direction="down" @click="show5 = !show5"></u-cell>
					</u-cell-group>
					<view class="List" v-for="n in nansha" v-show="show5===true" @click="onDetail(n.id)">
						<img :src="n.img" style="height: 150rpx; width: 150rpx; margin-bottom: 10rpx;">
						<view class="Text">
							<view class="" style="font-size: 40rpx;">
								{{n.name}}
							</view>
							<view class="" style="font-size: 25rpx;">
								原产地：广东省广州市{{n.text}}
							</view>
						</view>
						<br>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				text1:"粤放心团队基于粤港澳大湾区“菜篮子”工程核心供应链，立志让内地消费者也能品尝到“供港”、“供澳”的高品质、高质量的农产品。",
				show1:false,
				show2:false,
				show3:false,
				show4:false,
				show5:false,
				show6:false,
				tianhe:[{
						id:1,
						name:'绿宝菜心',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A4%A9%E6%B2%B3/%E7%BB%BF%E5%AE%9D%E8%8F%9C%E5%BF%83.png',
						text:'天河区'
				},
				{
						id:2,
						name:'冼村早椰菜',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A4%A9%E6%B2%B3/%E5%86%BC%E6%9D%91%E6%97%A9%E6%A4%B0%E8%8F%9C.png',
						text:'天河区'
				},
				{
						id:3,
						name:'芦笋',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A4%A9%E6%B2%B3/%E8%8A%A6%E7%AC%8B.png',
						text:'天河区'
				},
				{
						id:4,
						name:'大青皮冬瓜',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A4%A9%E6%B2%B3/%E5%A4%A7%E9%9D%92%E7%9A%AE%E5%86%AC%E7%93%9C.png',
						text:'天河区'
				}
				],
				panyu:[{
						id:5,
						name:'榄核冬瓜',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E7%95%AA%E7%A6%BA/%E6%A6%84%E6%A0%B8%E5%86%AC%E7%93%9C.png',
						text:'番禺区'
				},
				{
						id:6,
						name:'新造胡萝卜',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E7%95%AA%E7%A6%BA/%E6%96%B0%E9%80%A0%E8%83%A1%E8%90%9D%E5%8D%9C.png',
						text:'番禺区'
				},
				{
						id:7,
						name:'绿村黑蔗',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E7%95%AA%E7%A6%BA/%E7%BB%BF%E6%9D%91%E9%BB%91%E8%94%97.png',
						text:'番禺区'
				},
				{
						id:8,
						name:'胭脂红番石榴',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E7%95%AA%E7%A6%BA/%E8%83%AD%E8%84%82%E7%BA%A2%E7%95%AA%E7%9F%B3%E6%A6%B4.png',
						text:'番禺区'
				}
				],
				zengcheng:[{
						id:9,
						name:'增城挂绿荔枝',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A2%9E%E5%9F%8E/%E5%A2%9E%E5%9F%8E%E6%8C%82%E7%BB%BF%E8%8D%94%E6%9E%9D.png',
						text:'增城区'
				},
				{
						id:10,
						name:'增城迟菜心',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A2%9E%E5%9F%8E/%E5%A2%9E%E5%9F%8E%E8%BF%9F%E8%8F%9C%E5%BF%83.png',
						text:'增城区'
				},
				{
						id:11,
						name:'增城丝苗米',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A2%9E%E5%9F%8E/%E5%A2%9E%E5%9F%8E%E4%B8%9D%E8%8B%97%E7%B1%B3.png',
						text:'增城区'
				},
				{
						id:12,
						name:'派潭凉粉草',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%A2%9E%E5%9F%8E/%E6%B4%BE%E6%BD%AD%E5%87%89%E7%B2%89%E8%8D%89.png',
						text:'增城区'
				}
				],
				huangpu:[{
						id:13,
						name:'黄埔萝岗糯米糍',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E9%BB%84%E5%9F%94/%E8%90%9D%E5%B2%97%E7%B3%AF%E7%B1%B3%E7%B3%8D%E8%8D%94%E6%9E%9D.png',
						text:'黄浦区'
				},
				{
						id:14,
						name:'黄埔萝岗甜橙',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E9%BB%84%E5%9F%94/%E8%90%9D%E5%B2%97%E7%94%9C%E6%A9%99.png',
						text:'黄浦区'
				},
				{
						id:15,
						name:'黄埔萝岗杨梅',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E9%BB%84%E5%9F%94/%E8%90%9D%E5%B2%97%E6%9D%A8%E6%A2%85.png',
						text:'黄浦区'
				}
				],
				conghua:[{
						id:16,
						name:'从化荔枝',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E4%BB%8E%E5%8C%96/%E4%BB%8E%E5%8C%96%E8%8D%94%E6%9E%9D.png',
						text:'从化区'
				},
				{
						id:17,
						name:'从化荔枝蜜',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E4%BB%8E%E5%8C%96/%E4%BB%8E%E5%8C%96%E8%8D%94%E6%9E%9D%E8%9C%9C.png',
						text:'从化区'
				}
				],
				nansha:[{
						id:18,
						name:'南沙新垦莲藕',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%8D%97%E6%B2%99/%E6%96%B0%E5%9E%A6%E8%8E%B2%E8%97%95.png',
						text:'南沙区'
				},
				{
						id:19,
						name:'庙南粉葛',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%8D%97%E6%B2%99/%E5%BA%99%E5%8D%97%E7%B2%89%E8%91%9B.png',
						text:'南沙区'
				},
				{
						id:20,
						name:'甜玉米',
						img:'https://cantonese-basket.oss-cn-guangzhou.aliyuncs.com/%E8%8F%9C%E7%AF%AE%E5%AD%90%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%B9%BF%E5%B7%9E/%E5%8D%97%E6%B2%99/%E7%94%9C%E7%8E%89%E7%B1%B3.png',
						text:'南沙区'
				}
				],
			}
		},
		methods: {
			onDetail(e){
				uni.navigateTo({
					url:"/pages/featureExhibition/details/details?id="+e
				})
			}
		}
	}
</script>

<style>
	.search{
		margin-top: 10rpx;
	}
	.left{
		background-color: #f5f6f7;
		width: 30%;
		height: 1000rpx;
	}
	.right{
		margin-left: 20rpx;
		width: 75%;
		height: 1000rpx;
	}
	.box{
		display: flex;
		justify-content: space-between;
	}
	.city{
		text-align: center;
		font-weight: bold;
		padding: 20rpx;
	}
	.List{
		display: flex;
		justify-content: space-between;
	}
	.Text{
		display: flex;
		flex-direction: column;
	}
</style>
